<template>
    <div>
      <div class="heades">
          <i class="icons" :class="isCollapse ? 'el-icon-s-unfold' :'el-icon-s-fold' " @click="SetisCollapse"></i>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item  :to="{path:item.url}" v-for="(item,index) in tabslist" :key="index">{{item.menuname}}</el-breadcrumb-item>
          </el-breadcrumb>
      </div>
    </div>
  </template>
  <script>
  import { mapState,mapMutations } from 'vuex'
  export default {
    name: 'index',
    data() {
      return {
      }
    },
    computed:{
      ...mapState(['tabslist','isCollapse'])
    },
    methods: {
      ...mapMutations(['SetisCollapse'])
    },
  };
  </script>
  <style lang="scss" scoped>
  .heades{
    display: flex;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid #eee;
  }
  .icons{
    font-size: 28px;
    cursor: pointer;
    margin-right: 20px;
  }
  .heades ::v-deep .el-breadcrumb__item{
    .el-breadcrumb__inner.is-link{
      font-weight: 400;
    }
  }
  .heades ::v-deep .el-breadcrumb__item:last-child{
    .el-breadcrumb__inner.is-link{
      font-weight: 500;
      color: #409EFF;
    }

  }
  </style>
  